<template>
	<view>
		<view v-if="vhclcsinfo.vehicleStatus == 1" style="color: #fff;font-size: 24rpx;padding: 30rpx;background: #ccc;">车辆已被{{ etpName }}列入黑名单。</view>
		<view v-else>
			<view v-if="vhclcsinfo.status == 1" style="color: #fff;font-size: 24rpx;padding: 30rpx;background: #41ef6c;">车辆信息已提交给 {{ etpName }}审核，请耐心等待。</view>
			<view v-if="vhclcsinfo.status == 2 && statusText !== '已过期'" style="color: #fff;font-size: 24rpx;padding: 30rpx;background: #4275ef;display: flex;justify-content: center;align-items: center;">
				<image src="../../static/icon_pass.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
				车辆信息已通过！</view>
			<view v-if="vhclcsinfo.status == 2 && statusText == '已过期'" style="color: #fff;font-size: 24rpx;padding: 30rpx;background: #4275ef;" @click="onresve(1)">证件已过期，请重新上传。点击 <text style="color: red;text-decoration:underline;">立即修改</text></view>
			<view v-if="vhclcsinfo.status == 3" style="color: #fff;font-size: 24rpx;padding: 30rpx;background: #FB8536;" @click="onresve(2)">
				车辆信息被驳回，原因：{{ vhclcsinfo.reject }}，请在此处点击<text style="color: red;text-decoration:underline;">立即修改</text>
			</view>
			<view v-if="vhclcsinfo.status == 4" style="color: #fff;font-size: 24rpx;padding: 30rpx;background: #41ef6c;">车辆信息存在异常，已提交给平台申诉，申诉过程中可以正常接单。</view>
		</view>
		<view class="column-css view-cente">
			<view class="row-css view-cente-cle" style="justify-content: space-between;">
				<view class="view-cente-cle-text">车牌号</view>
				<view style="padding-right: 30rpx;">{{ vhclcsinfo.plateNum }}</view>
			</view>
		</view>
		<view class="column-css view-cente">
			<view class="row-css view-cente-cle" style="justify-content: space-between;align-items: center;">
				<view class="row-css" style="flex: 1;justify-content: space-between;">
					<view class="view-cente-cle-text">车牌颜色</view>
					<view v-if="vhclcsinfo.plateColour != ''">{{ array1[vhclcsinfo.plateColour - 1].dicName }}</view>
				</view>
				<image style="width: 28rpx;height: 28rpx;" src="../../static/icon_enter.png"></image>
			</view>
		</view>
		<view class="column-css view-cente">
			<view class="row-css view-cente-cle" style="justify-content: space-between;align-items: center;">
				<view class="row-css" style="flex: 1;justify-content: space-between;">
					<view class="view-cente-cle-text">车辆颜色</view>
					<view v-if="vhclcsinfo.vehicleColour != ''">{{ array2[vhclcsinfo.vehicleColour - 1].dicName }}</view>
				</view>
				<image style="width: 28rpx;height: 28rpx;" src="../../static/icon_enter.png"></image>
			</view>
		</view>
		<view class="column-css view-cente">
			<view class="row-css view-cente-cle" style="justify-content: space-between;align-items: center;">
				<view class="row-css" style="flex: 1;justify-content: space-between;">
					<view class="view-cente-cle-text">使用性质</view>
					<view>{{ vhclcsinfo.natureUse }}</view>
				</view>
				<image style="width: 28rpx;height: 28rpx;" src="../../static/icon_enter.png"></image>
			</view>
		</view>
		<view class="column-css view-cente">
			<view class="row-css view-cente-cle" style="justify-content: space-between;align-items: center;">
				<view class="row-css" style="flex: 1;justify-content: space-between;">
					<view class="view-cente-cle-text">车辆尺寸</view>
					<view>{{ vhclcsinfo.length }} * {{ vhclcsinfo.width }} * {{ vhclcsinfo.high }}mm</view>
				</view>
				<image style="width: 28rpx;height: 28rpx;" src="../../static/icon_enter.png"></image>
			</view>
		</view>
		<!-- <view class="column-css view-cente">
			<view class="row-css view-cente-cle" style="justify-content: space-between;align-items: center;">
				<view class="row-css">
					<view class="view-cente-cle-text">车辆类型</view>
					<view>{{ vhclcsinfo.vanType }}</view>
				</view>
				<image style="width: 28rpx;height: 28rpx;" src="../../static/icon_enter.png"></image>
			</view>
		</view> -->
		<view class="column-css view-cente">
			<view class="row-css view-cente-cle" style="justify-content: space-between;align-items: center;">
				<view class="row-css" style="flex: 1;justify-content: space-between;">
					<view class="view-cente-cle-text">车辆来源</view>
					<view>{{ vhclcsinfo.vehicleNature == 1 ? '公司车辆' : '司机自有车辆' }}</view>
				</view>
				<image style="width: 28rpx;height: 28rpx;" src="../../static/icon_enter.png"></image>
			</view>
		</view>
		<view class="column-css view-cente">
			<view class="row-css view-cente-cle" style="justify-content: space-between;align-items: center;">
				<view class="row-css" style="flex: 1;justify-content: space-between;">
					<view class="view-cente-cle-text">车轴</view>
					<view>{{ vhclcsinfo.axle }}</view>
				</view>
				<image style="width: 28rpx;height: 28rpx;" src="../../static/icon_enter.png"></image>
			</view>
		</view>
		<view class="column-css view-cente">
			<view class="row-css view-cente-cle" style="justify-content: space-between;align-items: center;">
				<view class="row-css" style="flex: 1;justify-content: space-between;">
					<view class="view-cente-cle-text">车辆品牌</view>
					<view>{{ vhclcsinfo.vehicleBrand }}</view>
				</view>
				<image style="width: 28rpx;height: 28rpx;" src="../../static/icon_enter.png"></image>
			</view>
		</view>
		<!-- <view class="column-css view-cente">
			<view class="row-css view-cente-cle" style="justify-content: space-between;align-items: center;">
				<view class="row-css">
					<view class="view-cente-cle-text">车辆登记日期</view>
					<view>{{ vhclcsinfo.validPeriod }}</view>
				</view>
				<image style="width: 28rpx;height: 28rpx;" src="../../static/icon_enter.png"></image>
			</view>
		</view> -->
		<view class="column-css view-cente">
			<view class="row-css view-cente-cle" style="justify-content: space-between;align-items: center;">
				<view class="row-css" style="flex: 1;justify-content: space-between;">
					<view class="view-cente-cle-text">吨位</view>
					<view>{{ vhclcsinfo.tonnage }}吨</view>
				</view>
				<image style="width: 28rpx;height: 28rpx;" src="../../static/icon_enter.png"></image>
			</view>
		</view>
		<view class="column-css view-cente">
			<view class="row-css view-cente-cle" style="justify-content: space-between;align-items: center;">
				<view class="row-css" style="flex: 1;justify-content: space-between;">
					<view class="view-cente-cle-text">核定载重量</view>
					<view>{{ vhclcsinfo.approvedLoad }}吨</view>
				</view>
				<image style="width: 28rpx;height: 28rpx;" src="../../static/icon_enter.png"></image>
			</view>
		</view>
		<view class="column-css view-cente">
			<view class="row-css view-cente-cle" style="justify-content: space-between;align-items: center;" @click="onvehiclecertificate(vhclcsinfo.vehicleId)">
				<view class="row-css" style="flex: 1;justify-content: space-between;">
					<view class="view-cente-cle-text">证件管理</view>
					<view class="perfection" :style="{ color: statusText == '已过期' ? '#E04B28' : '#333' }">{{statusText}}</view>
				</view>
				<image style="width: 28rpx;height: 28rpx;" src="../../static/icon_enter.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			etpName: uni.getStorageSync(this.DATA_KEY.etpName),
			statusText: '',
			driver_id: '',
			etp_id: '',
			vhclcsinfo: {},
			array1: '',
			array2: '',
			array3: '',
			vehicleId: ''
		};
	},
	onShow() {
		this.wxRequest({
			url: `${this.API}/driverService/getVehicleDetail`,
			method: 'POST',
			data:{
				vehicleId:this.vehicleId,
				etpId:this.etp_id
			},
			title: '加载中...',
			success: res => {
				this.vhclcsinfo = res.data.data;
				this.textStatus()
			}
		});
	},
	onLoad: function(options) {
		this.vehicleId = options.vehicleId;
		console.log('dsss============', this.vhclcsinfo);
		this.driver_id = uni.getStorageSync(this.DATA_KEY.userInfo).driverId;
		this.etp_id = uni.getStorageSync(this.DATA_KEY.etpId);
		//车牌颜色
		this.wxRequest({
			url: `${this.API}/driverService/queryDic`,
			method: 'POST',
			data: ['PLATE_COLOR'],
			success: res => {
				this.array1 = res.data.data.PLATE_COLOR;
				console.log('dddd============', this.array1);
			}
		});
		//车辆颜色
		this.wxRequest({
			url: `${this.API}/driverService/queryDic`,
			method: 'POST',
			data: ['VEHICLE_COLOUR'],
			success: res => {
				this.array2 = res.data.data.VEHICLE_COLOUR;
			}
		});
		this.wxRequest({
			url: `${this.API}/driverService/getVehicleDetail`,
			method: 'POST',
			data:{
				vehicleId:this.vehicleId,
				etpId:this.etp_id
			},
			title: '加载中...',
			success: res => {
				this.vhclcsinfo = res.data.data;
				this.textStatus()
			}
		});
	},
	methods: {
		textStatus() {
			if(this.vhclcsinfo.vehicleStatus == 1){
				this.statusText = '黑名单'
			}else{
				if(this.vhclcsinfo.infoState == 0){
					if(this.vhclcsinfo.status == 1){
						this.statusText = '审核中'
					}
					if(this.vhclcsinfo.status == 2){
						this.statusText = '已通过'
					}
					if(this.vhclcsinfo.status == 3){
						this.statusText = '已驳回'
					}
					if(this.vhclcsinfo.status == 4){
						this.statusText = '申诉中'
					}
				}else if(this.vhclcsinfo.infoState == 1){
					// this.statusText = '已通过'
					if(this.vhclcsinfo.status == 1){
						this.statusText = '审核中'
					}
					if(this.vhclcsinfo.status == 2){
						this.statusText = '已通过'
					}
					if(this.vhclcsinfo.status == 3){
						this.statusText = '已驳回'
					}
					if(this.vhclcsinfo.status == 4){
						this.statusText = '申诉中'
					}
				}else{
					this.statusText = '已过期'
				}
			}
		},
		onvehiclecertificate(vehicleId) {
			if(this.statusText === '已驳回'){
				uni.navigateTo({
					url: `/pages/vehicle/vehicleinformation?vehicleId=` + vehicleId
				});
			}else{
				uni.navigateTo({
					url: `/pages/vehicle/vehiclecertificate?vehicleId=` + vehicleId
				});
			}
		},
		onresve(num) {
			console.log('00000')
			if(num == 1){
				uni.navigateTo({
					url: `/pages/vehicle/vehiclecertificate?vehicleId=` + this.vehicleId+'&etp_id=' + uni.getStorageSync(this.DATA_KEY.etpId)
				});
			}else{
				uni.navigateTo({
					url: `/pages/vehicle/vehicleinformation?vehicleId=` + this.vehicleId+'&etp_id=' + uni.getStorageSync(this.DATA_KEY.etpId)
				});
			}
			console.log('====', this.vehicleId);
		}
	},
};
</script>

<style>
page {
	font-size: 30rpx;
	background: #ffffff;
}
.row-css {
	display: flex;
	flex-direction: row;
}

.column-css {
	display: flex;
	flex-direction: column;
}

.view-cente {
	background: #ffffff;
	padding: 0 30rpx;
}
.view-cente-cle {
	padding: 25rpx 0;
	border-bottom: 1rpx solid #eeeeee;
}
.view-cente-cle-text {
	width: 180rpx;
	color: #5f6579;
}

.perfection {
	border-radius: 25rpx;
	padding: 5rpx 10rpx;
	color: #ffffff;
}
</style>
